<template>
	<view class="placeOrder">
		<view class="upAddress"  @click="showphone=true">
			<view class="left">
				<u-icon name="map-fill" size="50" color="#f29100"></u-icon>
			</view>
			<view class="content">
				<view class="head">
					<view></view>
				</view>
				<view class="body">
					<view>{{address[0].address}}</view>
				</view>
				<view class="foot">
					<view>{{address[0].realName}} {{address[0].telNum}}</view>
				</view>
			</view>
		</view>
		<view class="middleDetail">
			<view class="head">
				<view class="left">
					<u-icon name="bookmark" size="20" ></u-icon>
				</view>
				<view class="storeName">信良记旗舰店</view>
			</view>
			<view class="mbody">
				<view class="left">
					<image :src="showObj.coverImg" class="img" mode="aspectFill"></image>
				</view>
				<view class="right">					
					<view class="fontDetail">
						<view class="title">{{showObj.productionName}}</view>
						<view class="nums">600g*3盒</view>
					</view>
					<view class="intro">
						<view class="price">￥{{showObj.price}}</view>
						<view class="numBox">
							<u-number-box v-model="value" @change="valChange" :min="0" :max="100"></u-number-box>
						</view>
					</view>
					<view class="sales">
						不支持7天无理由退货
					</view>
				</view>
			</view>
			<view class="under">
				<view class="one">
					<view class="left">配送服务</view>
					<view class="right">
						<u-icon name="arrow-right"></u-icon>
						快递 免邮 
					</view>
				</view>
				<view class="one">
					<view class="left">运险费</view>
					<view class="right">
						<u-icon name="arrow-right"></u-icon>
						未选择
					</view>
				</view>
				<view class="one">
					<view class="left">订单备注</view>
					<view class="right">
						<u-icon name="arrow-right"></u-icon>
						无备注
					</view>
				</view>
			</view>
		</view>
		<view class="middleTotal">
			<view class="one">
				<view class="left">商品金额</view>
				<view class="right">
					￥{{showObj.price}}
				</view>
			</view>
			<view class="one">
				<view class="left">退换无忧</view>
				<view class="right">
					￥0
				</view>
			</view>
			<view class="one">
				<view class="left">运费</view>
				<view class="right">
					￥0
				</view>
			</view>
		</view>
		<view class="underPay">
			<view class="one">
				<view class="left">发票</view>
				<view class="right">
					<u-icon name="arrow-right"></u-icon>
					不开发票
				</view>
			</view>
			<view class="one">
				<view class="left">支付方式</view>
				<view class="right">
					<u-icon name="arrow-right"></u-icon>
					在线支付
				</view>
			</view>
		</view>
		<view class="bottomPay">
			<view class="left">￥{{showObj.price}}</view>
			<button class="right" @click="submit">提交订单</button>
		</view>
		
		<u-popup :show="showphone" mode="center" @close="close" @open="open" closeable="true">
			<view class="input">
				<view class="textinput">
					<view class="up"></view>
					<view v-for="(item,index) in address"  @click="toDetail(item)" class="input_name">
						<view class="white-space:pre-wrap">{{item.address}}</view>
						<view class="white-space:pre-wrap">{{item.realName}} {{item.telNum}}</view>
					</view>
					
					<view class="button_name">
						<u-button text="新增地址" type="primary" @click="close"></u-button>
					</view>
			
				</view>
			</view>
			
		
		</u-popup>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				value:1,
				shrimpPrice:149.00,
				showObj:'',
				meOpenId:'',
				sellerOpenId:'',
				productId:'',
				showphone: false,
				address:[],
				addObj:null,
			}
		},
		mounted(){
			uni.getStorage({
				key:"user",
				success:(res)=>{
					var _this = this;
					_this.meOpenId=res.data.openId;
					console.log("本人openId:",res.data.userInfo);
					let data = {
						openId:res.data.openId,
						userName:res.data.userInfo.nickName,
						headImg:res.data.userInfo.avatarUrl
					}
					this.$axios(
						{
							method:'POST',
							url:'/user/login',
							data
						}
					).then(
						res => {
							console.log("success:",res.data.address[0]);
							for(var i=0;i<res.data.address.length;i++){
								if(_this.address.indexOf(res.data.address[i])==-1)
									_this.address.push(res.data.address[i]);
							}
							_this.addObj=res.data.address[0];
					}).catch(
						err => {
							console.log("error:",err);
						}
					)
				}
			})
			
		},
		onLoad(options) {
			this.showObj = JSON.parse(decodeURIComponent(options.content));
			console.log(this.showObj);
			this.shrimpPrice=this.showObj.price
			console.log("商家openId:",this.showObj.openId);
			this.sellerOpenId=this.showObj.openId;
			this.productId=this.showObj.id;
		},
		methods:{
			toDetail(item){
				this.addObj=item;
				console.log(this.addObj);
				this.showphone=false;
			},
			open() {
				// console.log('open');
			},
			close() {
				uni.navigateTo({
					url:'//pages/Me/addressdata',
				})
				this.showphone = false;
			},
			
			valChange(e){
				this.showObj.price = e.value * this.shrimpPrice;
			},
			submit(){
				console.log("本人openId:"+this.meOpenId);
				console.log("商家openId:"+this.sellerOpenId);
				console.log("商品Id:"+this.productId);
				console.log("商品地址:",this.addObj);
				var _this=this;
				this.$axios(
				{
					method:'POST',
					url:'/createOrder',
					data:{
						shopId:_this.sellerOpenId,
						userId:_this.meOpenId,
						address:_this.addObj,
						productionId:_this.productId
					}
				}).then(
					res=>{
						console.log(res.data);
						uni.showToast({
							icon:'none',
							title:'购买成功',
							duration:1500,
						})
					}
				).catch(
					err=>{
						console.log(err);
					}
				)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.placeOrder{
		width:100%;
		
		.upAddress{
			
			background-color: #eeeeef;
			height:200upx;
			width:90%;
			border-radius: 15upx;
			margin-top: 5%;
			margin-left:5%;
			margin-bottom: 5%;
			border-bottom: 2px solid;
			border-image: linear-gradient(to right,purple,pink) 1;
			display:flex;
			flex-direction: row;
			.left{
				width:15%;
				height:100%;
				display: flex;
				align-items: center;
			}
			.content{
				width:80%;
				height:95%;
				display:flex;
				flex-direction: column;
				.head{
					margin-top: 3%;
					margin-left: 3%;
					font-size: 30upx;
					font-weight: bold;
					height:25%;
					//background-color: green;
				}
				.body{
					//margin-top: 3%;
					margin-left: 3%;
					height:35%;
					font-size: 35upx;
					font-weight: bold;
					// background-color: blue;
				}
				.foot{
					margin-top: 2%;
					margin-left: 3%;
					height:25%;
					font-size: 30upx;
					//background-color: purple;
				}
			}
		}
		.detail{
			border:3rpx solid ;
		}
		.middleDetail{
			background-color: #eeeeef;
			height:550upx;
			width:90%;
			border-radius: 15upx;
			margin-top: 5%;
			margin-left:5%;
			margin-bottom: 5%;
			//display: flex;
			//flex-direction: column;
			.head{
				width:100%;
				height:10%;
				margin-left:3%;
				display: flex;
				flex-direction: row;
				.left{
					margin-top: 5%;
					display: flex;
					align-items: center;
				}
				.storeName{
					margin-right: 2%;
					margin-top: 3%;
				}
			}
			.mbody{
				display:flex;
				flex-direction: row;
				height:55%;
				width:100%;
				//background-color: blue;
				.left{
					margin-top: 5%;
					margin-left: 3%;
					//margin-bottom: 5%;
					width:35%;
					//background-color: red;
					// display: flex;
					// align-items:center;
					.img{
						width:100%;
						height:100%;
					}
				}
				.right{
					margin-top: 6%;
					margin-left: 3%;
					//margin-bottom: 5%;
					width:55%;
					//background-color: red;
					.fontDetail{
						.title{
							font-size:32upx;
						}
						.nums{
							margin-top: 5%;
							font-size:30upx;
							color:#82848a;
						}
					}
					.intro{
						// background-color: purple;
						display: flex;
						flex-direction: row;
						margin-top:5%;
						.price{
							color:red;
							font-weight: bold;
							font-size: 40upx;
						}
						.numBox{
							margin-left:5%;
						}
					}
					.sales{
						margin-top:5%;
						border:1px solid red;
						font-size: 25upx;
						color:red;
						width:70%;
					}
				}
			}
			.under{
				height:25%;
				margin-left:3%;
				.one{
					margin-top:3%;
					display:flex;
					flex-direction: row;
					width:100%;
					.left{
						width:50%;
					}
					.right{
						font-weight: bold;
						display:flex;
						width:50%;
						font-size: 25upx;
						flex-direction: row-reverse;
					}
				}
				
				
			}
			
		}
		.middleTotal{
			background-color: #eeeeef;
			height:250upx;
			width:90%;
			border-radius: 15upx;
			margin-top: 5%;
			margin-left:5%;
			margin-bottom: 5%;
			display: flex;
			flex-direction: column;
			.one{
				margin-top:5%;
				display:flex;
				flex-direction: row;
				width:100%;
				.left{
					margin-left: 3%;
					width:50%;
				}
				.right{
					font-weight: bold;
					font-size: 25upx;
					display:flex;
					width:50%;
					flex-direction: row-reverse;
					margin-right: 3%;
				}
			}	
		}
		.underPay{
			background-color: #eeeeef;
			height:150upx;
			width:90%;
			border-radius: 15upx;
			margin-top: 5%;
			margin-left:5%;
			margin-bottom: 5%;
			display: flex;
			flex-direction: column;
			.one{
				margin-top:3%;
				display:flex;
				flex-direction: row;
				width:100%;
				.left{
					margin-left: 3%;
					width:50%;
				}
				.right{
					display:flex;
					width:50%;
					font-size: 25upx;
					flex-direction: row-reverse;
				}
			}
		}
		.bottomPay{
			// position:fixed;
			// bottom:0;
			height:100upx;
			width:90%;
			margin-left:5%;
			display:flex;
			flex-direction:row;
			//background-color: white;
			.left{
				font-size: 50upx;
				font-weight:bold;
				color:red;
				width:50%;
			}
			.right{
				height: 80%;
				flex-direction:row-reverse;
				margin-right:3upx;
				background-color: red;
				color:white;
				font-weight:bold;
			}
		}
		.intput {
			padding: 20upx;
		}
		
		.button_name {
			width: 200upx;
			margin-left: 80upx;
			margin-top: 40upx;
		}
		.up{
			margin-top:80upx;
		}
		.input_name {
			border: 1upx solid #3B3532;
			margin-top: 20upx;
			margin-left: 20upx;
			margin-right: 20upx;
		}
	}
	
		
	
</style>